<template>
  <div>
    <!--头部-->
    <login-top title="登录bilibili">
        <template v-slot:right>
            <div style="font-size: 3.611vw;" @click="$router.push('/register')">切换到注册</div>
        </template>
    </login-top>

    <!--输入框-->
    <login-input label="账号" style="margin: 4.167vw 0" placeholder="请输入账号" rule="^.{6,16}$"
     @inputChange="res => model.username = res"/>
    <login-input label="密码" placeholder="请输入密码" type="password" rule="^.{6,16}$"
     @inputChange="res => model.password = res"/>

    <!--注册按钮-->
    <login-btn text="登录" @handleSubmit="handleSubmit"></login-btn>
  </div>
</template>

<script>
import LoginTop from '../components/common/LoginTop.vue'
import LoginInput from '../components/common/LoginInput.vue'
import LoginBtn from '../components/common/LoginBtn.vue'
export default {
  data () {
    return {
      model: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    // 注册账号
    async handleSubmit () {
      const reg = /^.{6,16}$/
      if (reg.test(this.model.username) && reg.test(this.model.password)) {
        const res = await this.$http.post('/login', this.model)
        if (res.data.code !== 200) return this.$msg.fail(res.data.msg)
        this.$msg.success(res.data.msg)
        // @todo跳转个人中心页
        localStorage.setItem('token', res.data.token)
        localStorage.setItem('id', res.data.id)
        setTimeout(() => {
          this.$router.push('/userinfo')
        }, 1000)
      } else {
        this.$msg.fail('格式不正确，请重新输入')
      }
    }
  },
  components: {
    LoginTop,
    LoginInput,
    LoginBtn
  }
}
</script>

<style>

</style>
